<template>
  <div>
绩效

  </div>
</template>

<script>
import  Sortable from 'sortablejs'
export default {
  name: "Achievements",
  data() {
    return {
      tableData: [
          {
        id:1,
        date: '2016-05-02',
        name: '1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:2,
        date: '2016-05-04',
        name: '2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:3,
        date: '2016-05-01',
        name: '3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:4,
        date: '2016-05-03',
        name: '4',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {
    // 行拖拽排序
    this.rowDrop()
  },
  methods: {
    btn(){
      console.log(this.tableData)
    },
    // 行拖拽
    rowDrop () {
      let tbody = document.querySelector('.el-table__body-wrapper tbody')
      let _this = this
      Sortable.create(tbody, {
        // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
        group: {
          name: 'words',
          pull: true,
          put: true
        },
        animation: 150, // ms, number 单位：ms，定义排序动画的时间
        onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
          console.log('onAdd.foo:', [evt.item, evt.from])
        },
        onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])
        },
        onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
          console.log('onRemove.foo:', [evt.item, evt.from])
        },
        onStart: function (evt) { // 开始拖拽出发该函数
          console.log('onStart.foo:', [evt.item, evt.from])
        },
        onSort: function (evt) { // 发生排序发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])

        },
        onEnd ({ newIndex, oldIndex }) { // 结束拖拽
          let currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
